<template>
    <div class="system-user-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"
            :before-close="closeDialog">
            <el-form ref="userDialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="code" label="部门编号">
                            <el-input v-model="state.content.code" :disabled="true" placeholder="自动生成" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="部门名称">
                            <el-input v-model="state.content.name" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注">
                            <el-input v-model="state.content.remark" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="上级部门">
                            <el-cascader :options="state.areaTreeData"
                                :props="{ multiple: false, checkStrictly: true, value: 'code', label: 'name' }"
                                :disabled='state.disabled' placeholder="请选择部门" clearable class="w100"
                                v-model="state.content.parentCodes">
                                <template #default="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="部门负责人" @click="userInfoRef.openUSerDialog()">
                            <el-input v-model="state.content.examineCode" clearable readonly placeholder="请选择部门负责人"
                                :suffix-icon="ArrowRight"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onContinuneSubmit" v-show="state.dialog.type !== 'edit'"
                        size="default">{{
                            t('message.btnName.continueSubmit')
                        }}</el-button>
                    <el-button @click="onSubmit" type="primary" size="default">{{ t('message.btnName.submit') }}</el-button>
                    <el-button @click="onCancel" size="info">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
        <userInfoDialog ref="userInfoRef" @refresh="getExamineCode"></userInfoDialog>
    </div>
</template>

<script setup lang="ts">
import { inject, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ArrowRight } from '@element-plus/icons-vue'
import userInfoDialog from "./userInfoDialog.vue"
import { usePersonOrgQueryApi, usePersonOrgTreeApi } from '/@/api/person/org';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
// const emit = defineEmits(['refresh']);

// 接收父组件传递的方法
const getTreeMenus: any = inject('getTreeMenus')

// 定义变量内容
const userDialogFormRef = ref();
const userInfoRef = ref();
const useContent = () => {
    return {
        code: '', // 账户名称
        name: '', // 用户姓名
        remark: '', // 邮箱
        parentCodes: [] as string[],
        parentCode: '',
        password: '', // 账户密码
        childern: [] as any,
        examineCode: '',
        // examineName: '',
    }
}
const state = reactive({
    urlStr: '',
    content: useContent(),
    areaTreeData: [] as TreeType[], // 部门数据
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
    },
    disabled: false
});

const getExamineCode = (arg: any) => {
    state.content.examineCode = arg[0].code
    // state.content.examineName = arg[0].name
}
// 表单校验
const formRules = ref({
    code: [
        { message: '必填项不能为空', trigger: 'blur' },
        { min: 1, max: 40, message: '编号必须1-40位字母数字组合而成', trigger: 'blur' },
        // { pattern: /^[1-9a-zA-Z]/, message: '编号必须非0数字或小写字母开头', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    // mobile: [{ pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '请输入正确手机号', trigger: 'blur' },],
})

// 打开弹窗
const openDialog = (option: string, urlStr: string, code?: any, parentCodes?: any) => {
    state.urlStr = urlStr
    state.dialog.type = option;
    state.disabled = true
    if (option === 'edit') {
        state.dialog.title = t('message.btnName.edit');
        usePersonOrgQueryApi(code).then(({ content }) => {
            state.content = content
        })
    } else {
        state.dialog.title = t('message.btnName.addRow');
        // 清空表单，此项需加表单验证才能使用
        state.content = useContent()
        state.content.parentCodes = parentCodes
    }
    getTreeData()
    state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    getTreeMenus()
};
// 取消
const onCancel = () => {
    closeDialog();
};

// 封装提交函数
const submit = (msg: string, fn?: any) => {
}

// 提交
const onSubmit = () => {
    submit('操作成功', closeDialog)
};

// 提交并继续
const onContinuneSubmit = () => {
    submit('操作成功,继续新增')
    // 添加settimeout 防止页面数据不刷新
    setTimeout(() => {
        // 页面刷新数据
        getTreeMenus()
        // dialog同步刷新数据
        getTreeData()
    }, 200);
};

const getTreeData = () => {
    usePersonOrgTreeApi().then(({ content }) => {
        state.areaTreeData = content
    })
};
onMounted(() => {
})
// 暴露变量
defineExpose({
    openDialog,
});
</script>
